<template>
  <div class="fans-container">
    <a-row :gutter="16">
      <a-col
        style="margin-bottom:16px"
        :span="4"
        v-for="item in fans"
        :key="item.id"
      >
        <a-card hoverable style="text-align:center">
          <a-avatar :src="item.photo" :size="64">
            <template v-slot:icon><UserOutlined /></template>
          </a-avatar>

          <div class="name" style="margin-top:20px">
            <a-tag color="blue">
              {{ item.name }}
            </a-tag>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-pagination
      :total="total_count"
      :show-total="total_count => `Total ${total_count} items`"
      :page-size="per_page"
      v-model:current="page"
      @change="onChange"
    />
  </div>
</template>

<script>
import { routes } from './data'

import { getFans } from '@/api/followers'

import { reactive, toRefs } from 'vue'

import { UserOutlined } from '@ant-design/icons-vue'

export default {
  name: 'Fans',
  components: {
    UserOutlined
  },
  setup() {
    const state = reactive({
      fans: [],
      page: 1,
      per_page: 20,
      total_count: 0
    })

    const getFansData = async page => {
      const params = {
        page: page || 1,
        per_page: state.per_page
      }
      const res = await getFans(params)
      state.page = res.data.page
      state.fans = res.data.results
      state.total_count = res.data.total_count
    }

    const onChange = page => {
      getFansData(page)
    }

    getFansData()
    return {
      routes,
      ...toRefs(state),

      onChange
    }
  }
}
</script>

<style></style>
